<template>
    <div>
        <el-card class="box-card">
            <!-- @finish="onFinish" el 不支持 antd vue 的这个 @finish -->
            <!-- @click="onFinish" 可以输入，但是重置没反应！! -->
            <el-form ref="softFormRef" name="advanced_search" class="ant-advanced-search-form" :model="softForm">
                <el-row :gutter="24">
                    <template v-for="i in Object.keys(softForm).length" :key="i">
                        <el-col v-show="expand || i <= 3" :span="8">
                            <el-form-item :name="`${searchFieldOptions[i - 1]?.value}`"
                                :label="`${searchFieldOptions[i - 1]?.label}`"
                                :prop="'query.' + i + '.value'"
                            >
                                    <!-- v-model="formState[`${searchFieldOptions[i - 1]?.value}`]" -->
                                    <!-- formState[setQueryFormState(i)] -->
                                <el-input v-if="searchFieldOptions[i - 1]?.type === 'input'"
                                    v-model="formState[`${searchFieldOptions[i - 1]?.value}`]" placeholder="请输入">
                                </el-input>
                                <el-select v-if="searchFieldOptions[i - 1]?.type === 'select'"
                                    v-model="formState[setQueryFormState(i)]" placeholder="请选择">
                                    <el-option v-for="item in searchFieldOptions[i - 1]?.options" :key="item.value"
                                        :value="item.label">
                                        {{ item.label }}
                                    </el-option>
                                </el-select>
                                <!-- v-model:value 加value会导致内容选中不了！！ -->
                                <el-date-picker v-if="searchFieldOptions[i - 1]?.type === 'time'"
                                    v-model="formState[setQueryFormState(i)]" type="datetimerange"
                                    start-placeholder="开始日期" end-placeholder="结束日期" format="YYYY-MM-DD HH:mm:ss"
                                    date-format="YYYY/MM/DD ddd" time-format="A hh:mm:ss" />
                            </el-form-item>
                        </el-col>
                    </template>
                </el-row>
                <el-row>
                    <el-col :span="24" style="text-align: right">
                        <el-button type="primary" html-type="submit" @click="submitForm(formRef)">查询</el-button>
                        <el-button style="margin: 0 8px" @click="() => formRef?.resetFields()">重置</el-button>
                        <el-button style="margin: 0 8px" @click="resetForm(formRef)">Reset</el-button>
                        <a style="font-size: 12px" @click="expand = !expand">
                            <template v-if="expand">
                                <el-icon>
                                    <ArrowUpBold />
                                </el-icon>收起
                            </template>
                            <template v-else>
                                <el-icon>
                                    <ArrowDownBold />
                                </el-icon> 展开
                            </template>
                            <!-- Collapse -->
                        </a>
                    </el-col>
                </el-row>
            </el-form>
        </el-card>
    </div>
    <div class="search-result-list" style="padding-top: 30px;">
        <el-card class="box-card">
            <template #header>
                <div class="card-header">
                    <span>查询表格</span>
                    <el-button class="button" type="primary" html-type="submit">新建</el-button>
                </div>
            </template>
            <el-table :data="tableData" style="width: 100%; ">
                <el-table-column fixed prop="date" label="Date" width="150" />
                <el-table-column prop="name" label="Name" width="120" />
                <el-table-column prop="state" label="State" width="120" />
                <el-table-column prop="city" label="City" width="120" />
                <el-table-column prop="address" label="Address" width="600" />
                <el-table-column prop="zip" label="Zip" width="120" />
                <el-table-column fixed="right" label="Operations" width="120">
                    <template #default>
                        <el-button link type="primary" size="small" @click="handleClick">Detail</el-button>
                        <el-button link type="primary" size="small">Edit</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <template #footer>
                <div class="demo-pagination-block">
                    <!-- <div class="demonstration">All combined</div> -->
                    <el-pagination v-model:current-page="currentPage4" v-model:page-size="pageSize4"
                        :page-sizes="[100, 200, 300, 400]" :background="true"
                        layout="total, sizes, prev, pager, next, jumper" :total="400" @size-change="handleSizeChange"
                        @current-change="handleCurrentChange" />
                </div>
            </template>
        </el-card>
    </div>
</template>
  
<script lang="ts" setup>
import { reactive, ref } from 'vue';
// import {computed} from 'vue'
import type { FormInstance } from 'element-plus'
import { ArrowUpBold, ArrowDownBold } from '@element-plus/icons-vue'

const softForm = reactive<{
    softName: string,
    softVersion: string,
    gitUrl: string,
    language: string,
    status: string,
    timeRange: string,
}>({
    softName: '',
    softVersion: '',
    gitUrl: '',
    language: '',
    status: '',
    timeRange: '',
})

const softFormRef = ref<FormInstance>()

// 分页
const currentPage4 = ref(4)
const pageSize4 = ref(100)

const handleSizeChange = (val: number) => {
    console.log(`${val} items per page`)
}
const handleCurrentChange = (val: number) => {
    console.log(`current page: ${val}`)
}

// 查询条件
const expand = ref(false);

const formRef = ref<FormInstance>();
// const formRef: any = ref();
const formState: any = reactive({});
// const onFinish = (values: any) => {
//     console.log('Received values of form: ', values);
//     console.log('formState: ', formState);
// };
// const dataPickerComputed = computed((queryType: any) => {
//     return queryType === 'time' ? true : false;
// })
/*
chunk-LDP35VKU.js?v=1486e91e:288 [Vue warn] 
Computed is still dirty after getter evaluation, 
likely because a computed is mutating its own dependency in its getter. 
State mutations in computed getters should be avoided.  
Check the docs for more details:
*/


const setQueryFormState = (index: number) => {
    // 报错
    // formState[`${searchFieldOptions[index - 1]?.value}`]
    return `${searchFieldOptions[index - 1]?.value}`
}

// 还是报警
// const findIndexValue = (index: number) => {
//     return searchFieldOptions[index - 1]
// }

const submitForm = (formEl: FormInstance | undefined) => {
    console.log('Received values of form: ', formEl);
    console.log('formState: ', formState);
    if (!formEl) return
    formEl.validate((valid) => {
        if (valid) {
            console.log('submit!')
        } else {
            console.log('error submit!')
            return false
        }
    })
}

const resetForm = (formEl: FormInstance | undefined) => {
    if (!formEl) return
    formEl.resetFields()
    // 重置后
    console.log('重置后 form: ', formEl);
    console.log('重置后 formState: ', formState);
    console.log('重置后 formRef: ', formRef);

    // formState 值还在，还原初始值
    // 还是不行，重置不了
    // formState = reactive({});
    // formRef= ref<FormInstance>();


    console.log('重置后1 form: ', formEl);
    console.log('重置后1 formState: ', formState);
    console.log('重置后1 formRef: ', formRef);
}

// 查询字段
const searchFieldOptions = [
    { label: '软件名称', value: 'softName', type: 'input', options: [{label: '', value: ''}] },
    { label: '软件版本', value: 'softVersion', type: 'input', options: [{label: '', value: ''}] },
    { label: 'git地址', value: 'gitUrl', type: 'input', options: [{label: '', value: ''}] },
    { label: '编程语言', value: 'language', type: 'input', options: [{label: '', value: ''}] },
    {
        label: '状态', value: 'status', type: 'select',
        options: [{
            label: '进行中',
            value: '0',
        }, {
            label: '成功',
            value: '1',
        }, {
            label: '失败',
            value: '2',
        }]
    },
    { label: '时间范围', value: 'timeRange', type: 'time', options: [{label: '', value: ''}] },
];


const handleClick = () => {
    console.log('click')
}

const tableData = [
    {
        date: '2016-05-03',
        name: 'Tom',
        state: 'California',
        city: 'Los Angeles',
        address: 'No. 189, Grove St, Los Angeles',
        zip: 'CA 90036',
        tag: 'Home',
    },
    {
        date: '2016-05-02',
        name: 'Tom',
        state: 'California',
        city: 'Los Angeles',
        address: 'No. 189, Grove St, Los Angeles',
        zip: 'CA 90036',
        tag: 'Office',
    },
    {
        date: '2016-05-04',
        name: 'Tom',
        state: 'California',
        city: 'Los Angeles',
        address: 'No. 189, Grove St, Los Angeles',
        zip: 'CA 90036',
        tag: 'Home',
    },
    {
        date: '2016-05-01',
        name: 'Tom',
        state: 'California',
        city: 'Los Angeles',
        address: 'No. 189, Grove St, Los Angeles',
        zip: 'CA 90036',
        tag: 'Office',
    },
]
</script>

<!-- <style scoped>
.demo-pagination-block + .demo-pagination-block {
  margin-top: 10px;
}
.demo-pagination-block .demonstration {
  margin-bottom: 16px;
}
</style> -->

<style scoped>
.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.text {
    font-size: 14px;
}

.item {
    margin-bottom: 18px;
}

.box-card {
    width: 100%;
    height: 100%;
}
</style>

<!-- 

.box-card {
    width: 480px;
}
// 这个是限制卡片宽度的，去掉！！

// 按钮放右边
.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
 -->

 <!-- 

    需求：一个弹框同时实现新增、修改功能。点击修改时赋值到弹框里面的表单，点击新增弹框里面表单都是无值

问题：当进入页面先点击修改再点新增，弹框里面的值无法清空。而先点击新增再点修改则不会出现这个问题

分析：经过多方资料查找，得出结论：此问题的导致原因是与Form绑定的Model对象第一次赋值有关系
即在哪个阶段被赋值的，赋值的是什么，reset之后就会恢复成这个阶段赋值的内容

  -->